<template>
    <div ref="scrollCon">
        {{list.length}}
        <bao-song-item
            v-for="item in list"
            :key="item.aid"
            :pic="item.pic"
            :artist="item.artist"
            :playcnt="item.playcnt"
            :name="item.name"
        ></bao-song-item>
        <bao-dialogs></bao-dialogs>
    </div> 
</template> 

<script>
import loadmore from '@/mixins/loadmore';
export default {
    mixins:[loadmore],
    data(){
        return {
            list:[],
            pagesize:15,
            num:8
        }
    },
    created(){
        console.log(this.num,'this.num');
        //请求第一页的数据
        this.getList();
    },
    mounted(){
        // let scrollBox = .parentNode; //父级

        this.loadmore(this.$refs.scrollCon,() => {
            this.pagesize += 15;
            this.getList();
        });

    },
    methods:{
        getList(){
            //请求歌曲列表
            this.$http.getSongs({
                type:'getvideos',
                pagesize:this.pagesize,
                collectid:29
            }).then(res => {
                this.list = res.data.list.slice(1);
            })
        }
    }
}

/**
 * 
 * 生命周期函数不能写成箭头函数，内部this不指向vue实例
 * 
 * 第一个阶段：
 * 
 *  数据初始化阶段：
 * 
 *  beforeCreate ：数据初始化之前
 * 
 *  created ：数据初始化，data methods
 * 
 * 第二个阶段：挂载阶段  
 * 
 * beforeMount:dom挂载前
 * 
 * mounted：dom完成  获取真正的dom节点
 * 
 * this.$nextTick(() =>{获取真实的dom节点})
 * 
 * 
 * 第三个阶段：更新阶段
 * 
 * beforeUpdate：更新前
 * 
 * updated：更新完成  尽量不要修改数据，造成死循环
 * 
 * 第四个阶段：销毁阶段
 * 
 * beforeDestory：销毁前  清楚定时器，删除添加事件
 * 
 * destoryed：销毁完毕
 * 
 * 
 * **/ 


// 作业：1.项目完成并推到git   2.画vue的知识点的思维导图
</script>


